<template>
	<view class="container">
	  <view class="login-form">
		<view class="form-item">
		  <text class="label">用户名：</text>
		  <input class="input" type="text" v-model="username" placeholder="请输入用户名" />
		</view>
		<view class="form-item">
		  <text class="label">密码：</text>
		  <input class="input" type="password" v-model="password" placeholder="请输入密码" />
		</view>
		<view class="form-item">
		  <button class="login-button" @click="login">登录</button>
		</view>
	  </view>
	   <!-- 跳转到注册页面的链接 -->
	      <view class="register-link">
	        <text @click="goToRegister">还没有账号？前往注册</text>
	      </view>
	</view>
	
</template>

<script>
	import { ElMessage } from 'element-plus';
	// import { findAll } from '/axios/http.js';
	import { getParams } from '@/axios/http';
	// import http from "/axios/http.js"
	import axios from "axios";
	import base from "/axios/base.js"
	export default {
		data() {
			return {
				username: '', // 用户名
				password: ''  ,// 密码
				url: base.url,
			}
		},
		onLoad() {
			
		},
		methods: {
			  async login() {
				 console.log("username:"+this.username+" password:"+this.password);
				 if(this.username===''||this.password===''){
					 ElMessage({
						message: '用户名密码不能为空',
						offset: 250,
					  });
				 }else{
					 let url = this.url+'/login';
					 let data = {
						 username: this.username,
						 password: this.password
					 }
					 try {
					   const response = await getParams('/login',data); // 调用封装的 GET 请求
					   console.log(response.data)
					   //如果登录不成功
					   if(response.data.code !=200){
					   	 uni.showToast({
					   	 	title: response.data.message,
					   		icon: "error",
					   	 	duration: 2000
					   	 });
					    }else{//成功后设置cookie并跳转
							uni.setStorageSync('LoginUser', response.data.loginUser);
							
							// 关闭当前页面，跳转到index目标页面
							// 注册成功后跳转到登录页面
							 uni.showToast({
							  title: '登录成功',
							  icon: 'success',
							  duration: 1000
							});
							setTimeout(() => {
							  uni.switchTab({
								url: '/'
							  });
							}, 1000);
						}
					 } catch (error) {
					   console.error('请求失败:', error);
					 }
				 }
			 },
			 
			  goToRegister() {
			       // 跳转到注册页面
			       uni.navigateTo({
			         url: '/pages/register/register'
			       });
			     }
		 }
			  
	}
</script>

<style>
	.container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	  background: linear-gradient(135deg, #74ebd5, #acb6e5); /* 渐变背景 */
	  padding: 20px;
	  flex-wrap: wrap;
	  flex-direction: row-reverse;
	  align-content: center;
	}
	
	.login-form {
	  background-color: #fff;
	  padding: 20px;
	  border-radius: 15px; /* 圆角 */
	  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 阴影 */
	  width: 100%;
	  max-width: 400px;
	  /* text-align: center; */
	}
	
	.form-item {
	  margin-bottom: 20px;
	}
	
	.label {
	  display: block;
	  margin-bottom: 5px;
	  font-size: 16px;
	  color: #333;
	  font-weight: bold;
	}
	
	.input {
	  /* width: 100%; */
	  padding: 12px;
	  border: 1px solid #ccc;
	  border-radius: 8px; /* 圆角 */
	  font-size: 16px;
	  color: #333;
	  background-color: #f9f9f9; /* 输入框背景色 */
	}
	
	.login-button {
	  width: 100%;
	  padding: 12px;
	  background-color: #007aff;
	  color: #fff;
	  border: none;
	  border-radius: 8px; /* 圆角 */
	  font-size: 16px;
	  cursor: pointer;
	  transition: background-color 0.3s ease; /* 按钮动画 */
	}
	
	.login-button:active {
	  background-color: #0056b3;
	}
	.register-link {
	  margin-top: 20px;
	  font-size: 14px;
	  color: #007aff;
	  cursor: pointer;
	}
	
	.register-link text {
	  color: #007aff;
	}
	
	/* 媒体查询：小屏幕设备 */
	@media (max-width: 600px) {
	  .login-form {
	    padding: 15px;
	  }
	
	  .input, .login-button {
	    font-size: 14px;
	    padding: 10px;
	  }
	
	  .label {
	    font-size: 14px;
	  }
	}
</style>